<!DOCTYPE html>
<html  lang="zh-CN">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <meta content=always name=referrer>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>
  <link rel="stylesheet" type="text/css" href="__STATIC__/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="__STATIC__/css/swiper.min.css">
  <link rel="stylesheet" type="text/css" href="__STATIC__/css/public.css">
  <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css">
  <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
  <script src="__STATIC__/js/jquery-1.11.3.min.js"></script>
  <script src="__STATIC__/layer/layer.js"></script>
  <script src="__STATIC__/js/Validform_v5.3.2_min.js"></script>
  <title>注册</title>
</head>
<body>
<div class="wrap">
  <div class="login_index">
    <div class="logo"><img src="__STATIC__/img/logo.jpg" style="width: 230px;height:80px;"></div>
    <div class="main" style="background: url('/{$data}') no-repeat center center">
      <div>
        <form action="" method="post" id="form">
          <div class="login_input">
            <div class="login_title">完善用户信息</div>
            <div class="input-group">
              <!--<div class="area">-->
              <!--<span>中国</span>-->
              <!--<img src="__STATIC__/img/more1.png" class="more">-->
              <!--</div>-->
              <input type="text" class="input_short" name="username" placeholder="手机号码" datatype="m11" errormsg="手机号码格式不正确"
                     nullmsg="手机号不能为空！"  style="width: 314px;">
            </div>
            <div class="input-group">
              <div class="area code"><a href="javascript:check_num();" id="yzm">获取验证码</a></div>
              <input type="text" class="input_short" name="code" placeholder="验证码" datatype="n4" nullmsg="请填写验证码" errormsg="请填写6位纯数字">
            </div>
            <div class="input-group">
              <input type="password" class="input_short" name="password" placeholder="请填写登录密码" datatype="s6-18" nullmsg="请填写登录密码" errormsg="密码格式错误！" style="width: 314px;">
            </div>
            <div class="input-group">
              <input type="text" class="input_short" name="referrals_id" placeholder="请填写推荐人ID"  style="width: 314px;">
            </div>
            <div class="input-group">
              <input type="submit" id="sub" value="立即注册">
            </div>
            <div class="protocol">
              <input type="checkbox" class="checkbox" id="checkbox_1" datatype="*" nullmsg="请同意注册协议"  name="read" value="1">
              <label for="checkbox_1">我已阅读并同意<span onclick="user_registration();">《喜利在线服务使用协议》</span></label>
            </div>
            <div class="login">
              <span><a href="{:url('shop/Login/index')}" class="go_login">< 已有账号登录</a></span>
            </div>

          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script>
  // 输入内容判断
  $(function () {
    $.Tipmsg.r = null;
    $.Tipmsg.p = null;
    $.Datatype.n4 = /^\d{6}$/;
    $.Datatype.m11 = /^1(3|4|5|7|8)\d{9}$/;
    $("#form").Validform({
      tiptype: function (msg) {
        layer.msg(msg);
      },
      btnSubmit: '#sub',
      tipSweep: true,
      // ajax 提交
      ajaxPost:true,
      callback: function (t) {
        if (t.code == 200) {
          layer.msg('注册成功');

          setTimeout(function(){
            layer.closeAll('loading');
            // 跳转页面
            location.href = "{:url('shop/index/index')}";
          }, 3000);

        }else {
          layer.msg(t.message);
        }

      }
    });
  });

  //发送验证码
  function check_num() {
    var tel = '';

    tel = $("[name='username']").val();

    if (tel == '') {
      layer.msg('请输入手机号！');
      return ;
    }
    if (!(/^1(3|4|5|7|8)\d{9}$/.test(tel))) {
      layer.msg('手机号格式不正确！');
      return ;
    }
    if (!check_unique(tel)) {
      return ;
    }

    count_down();
    $.ajax({
      url: "{:url('shop/login/getVerif')}",
      dataType: 'json',
      type: 'post',
      data: {'tel': tel,'act':'pc_weixin'},
      success: function (t) {
        if (t.code != 200) {
          layer.msg(t.message);
        }
      }
    })
  }

  //验证码倒计时
  function count_down() {
    var num = 60;
    var verif = $('#yzm');
    var timer = setInterval(function () {
      verif.text(num + '秒');
      if (num <= 60 && num >= 1) {
        verif.addClass('.disable');
        verif.removeAttr('href');
      } else {
        verif.text('重新获取验证码');
        window.clearInterval(timer);
        verif.attr("href", 'javascript:check_num();');
      }
      num--;
    }, 1000);
  }

  //检测新绑定的手机号码的正确性
  function check_unique(tel) {
    var flag = true;
    $.ajax({
      url: "{:url('shop/login/bind_phone')}",
      type: 'post',
      async: false,
      dateType: 'json',
      data: {'tel': tel},
      success: function (t) {
        if (t.code != 200) {
          layer.msg(t.message);
          flag = false;
        }
      }
    });
    return flag;
  }

  // 用户注册协议
  function user_registration() {
    layer.open({
      type: 2,
      area: ['700px', '530px'],
      fixed: false, //不固定
      maxmin: true,
      content: "{:url('shop/UserAgreement/user_registration')}"
    });
  }

  // 隐私声明
  function privacy_statement() {
    layer.open({
      type: 2,
      area: ['700px', '530px'],
      fixed: false, //不固定
      maxmin: true,
      content: "{:url('shop/UserAgreement/privacy_statement')}"
    });
  }

  function add_keyboard() {
    $('#softkeyboard').toggle();
  }
</script>
</body>
</html>